<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab面板实例</title>
		<script type="text/javascript" src="../org/angular.min.js" ></script>
		<script type="text/javascript" src="../org/jquery.min.js" ></script>
	</head>
	<body>
		<div ng-app='myApp' ng-controller='ctrl'>
			<my-cms datat='data'></my-cms>
		</div>
		<script>
			var m = angular.module('myApp',[]);
			m.directive('myCms',[function(){
				return{
					restrict:'E',
					templateUrl:'../link/tab-link.html',
					scope:{data:'=datat'},
					link:function(scope,elem,attr){
						$(elem).delegate('a','click',function(){
							$('a').removeClass('active');
							$(this).addClass('active');
							var index = $(this).index();
							$(elem).find('ul').hide();
							$(elem).find('ul').eq(index-1).show();
						})
					}
				}
			}])
			m.controller('ctrl',['$scope',function($scope){
				$scope.data=[
				{
					id:'1',
				    bigtitle:'新闻',
				    content:[
				        {id:'1',title:'这是第一条新闻'},
				        {id:'2',title:'这是第二条新闻'},
				        {id:'3',title:'这是第三条新闻'}
				    ]},
				{
					id:'2',
					bigtitle:'热点',
					content:[
					    {id:'1',title:'这是第一条热点'},
					    {id:'2',title:'这是第二条热点'},
					    {id:'3',title:'这是第三条热点'}
					]}
				];
				
			}]);
		</script>
	</body>
</html>
